<template>
  <div class="app-container">
    <el-form ref="form" label-width="0px">
      <el-form-item>
        <el-col :span="10">
          <el-input type="textarea" v-model="plaintext" :rows="22"></el-input>
        </el-col>
        <el-col class="line" :span="4">
            <el-container>
            <el-header></el-header>
            <el-main>
                <el-button type="primary" icon="el-icon-d-arrow-right" @click="encryption">加密</el-button>
            </el-main>
            <el-main>
                <el-button type="primary" icon="el-icon-d-arrow-left" @click="decrypt">解密</el-button>
            </el-main>            
            <el-footer></el-footer>
            </el-container>
        </el-col>
        <el-col :span="10">
          <el-input type="textarea" v-model="ciphertext" :rows="22"></el-input>
        </el-col>
      </el-form-item>
    </el-form>
  </div>
</template>


<script>
import { encry, decrypt } from '@/api/encrypt'

export default {
  data() {
    return {
      plaintext: '',
      ciphertext: ''
    }
  },
  methods: {
    encryption() {
      encry(this.plaintext).then(response => {
        this.ciphertext = response.data.replace(/[\r\n]/g, '')
      })
    },
    decrypt() {
      decrypt(this.ciphertext).then(response => {
        this.plaintext = response.data.replace(/[\r\n]/g, '')
      })
    }
  }
}
</script>

<style scoped>
  .app-container {
    background-color: #f0f2f5;
    padding: 30px;
    min-height: calc(100vh - 84px);
  }
  .el-main {
    text-align: center;
    line-height: 120px;
  }
</style>

